<template>
	<view class="customerForm">
		<!-- 选项卡类别列表 -->
		<view class="tab-scroll_item">
			<text class="tabitem" v-for=" (item,index) in category" :key="index" :class="{'active':isActive==index}"
				@click="tabbarClick(index)">{{item.name}}</text>
		</view>
		<swiper @change="swiperChange" :current="isActive" class="swiper-content" :style="fullHeight">
			<swiper-item class="swiperitem-content">
				<uni-forms ref="baseForm" :modelValue="formData" label-width="90px" :rules="rules">
					<uni-forms-item label="客户编码">
						<uni-easyinput v-model="formData.cCusCode" placeholder="请输入客户编码" />
					</uni-forms-item>
					<uni-forms-item label="客户名称" required name="cCusName">
						<uni-easyinput v-model="formData.cCusName" placeholder="请输入客户名称" />
					</uni-forms-item>
					<uni-forms-item label="账期(天)">
						<uni-easyinput type="number" v-model="formData.DelayDays" placeholder="请输入账期(天)" />
					</uni-forms-item>
					<uni-forms-item label="联系方式">
						<uni-easyinput type="number" v-model="formData.cCusPhone" placeholder="请输入联系方式" />
					</uni-forms-item>
					<uni-forms-item label="客户地址">
						<uni-easyinput v-model="formData.cCusAddress" placeholder="请输入客户地址" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit">保 存</button>
			</swiper-item>
			<!-- 后续需要打开 -->
			<!-- <swiper-item class="swiperitem-content">
				<ContactPerson  ref="ContactPerson"/>
			</swiper-item> -->
		</swiper>
	</view>
</template>

<script>
	import ContactPerson from "./ContactPerson/ContactPerson.vue"
	import {
		regPhone
	} from '@/utils/regExp.js'
	export default {
		components:{
			ContactPerson
		},
		data() {
			return {

				isActive: 0,
				fullHeight: "",
				// tab切换
				category: [{
						id: 0,
						name: "编辑客户"
					},
					// 后续需要打开
					// {
					// 	id: 1,
					// 	name: "客户联系人"
					// }
				],
				formData: {
					ISsignCode: true
				},
				rules: {
					cCusCode: {
						rules: [{
							required: true,
							errorMessage: '请输入客户编码',
						}]
					},
					cCusName: {
						rules: [{
							required: true,
							errorMessage: '请输入客户名称',
						}]
					},
					DelayDays: {
						rules: [{
							required: true,
							errorMessage: '请输入账期(天)',
						}]
					},
					cCusPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (!regPhone.test(value)) return callback('手机号格式错误')
								return true
							}
						}]
					},
					//传递过来的客户id
					customerId:""
				}
			}
		},
		// 监听原生导航栏右上角文字
		onNavigationBarButtonTap(e) {
			// console.log('打印详情',this.formData)
			// console.log(e);
			// if(this.isActive==0){
			// 	this.$api.msg('请先切换到客户联系人')
			// 	return
			// }
			// let customer=""
			// let cCusId= this.formData.Id
			// if(this.formData.cCusName){
			// 	customer = this.formData.cCusName
			// }
			// uni.navigateTo({
			// 	url: '/pages/Information/page/ContactPerson/ContactPersonForm?cCustomer='+customer +'&cCusId='+cCusId
			// })
		},
		mounted() {
			var that = this;
			//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = "height:" + res.windowHeight + "px";
				}
			});
		},
		onLoad(query) {
			if (query.Id) {
				this.customerId= query.Id
				uni.setNavigationBarTitle({
					title: '编辑客户'
				})
				this.getTheData(this.customerId)
			}else{
				this.category[0].name="新增客户"
			}
			this.formData.CompanyId = uni.getStorageSync('CompanyInfo').Id
		},
		onShow() {
			
			// this.$nextTick(()=>{
			// 	console.log('1111');
			// 	this.$refs.ContactPerson.data=[]
			// 	this.$refs.ContactPerson.getDataList()
			// })
			
		},
		methods: {
			// 轮播图切换改变事件
			swiperChange(e){
				console.log('切换',e.detail.current)
				let current=e.detail.current
				if(current==1){
					this.$refs.ContactPerson.queryParam.keys= this.customerId
					// 调用子组件客户联系人列表数据
					this.$refs.ContactPerson.getDataList()
				}
				
			},
			// 顶部tab导航栏切换
			tabbarClick(index) {
				this.isActive = index

			},
			getTheData(id) {
				this.$http("post", "/BO/CustomerInfo/GetTheData", {
					id
				}).then((res) => {
					if (res.Success) {
					
						this.formData = res.Data;
							console.log('formDataformData',this.formData)
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				});
			},
			submit() {
				this.$refs['baseForm'].validate().then(res => {
					if (this.formData.cCusPhone) {
						if (!regPhone.test(this.formData.cCusPhone)) return this.$api.msg('请检查手机号格式是否正确')
					}
					uni.showLoading()
					this.$http('post', "/BO/CustomerInfo/SaveData", this.formData)
						.then((res) => {
							uni.hideLoading()
							if (res.Success) {
								uni.showToast({
									icon: 'none',
									title: '保存成功'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							} else uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						});
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customerForm {
		padding: 20rpx;
		box-sizing: border-box;

		.tab-scroll_item {
			font-weight: bold;
			display: flex;
			margin-bottom: 40rpx;

			.tabitem {
				margin-right: 50rpx;
			}
		}

		.active {
			color: #153EF2;
			font-weight: bold;
			border-bottom: 2px solid #153EF2;
			padding-bottom: 20rpx;
		}
	}
</style>